<%@page contentType="text/html;charset=utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!-- Document Title -->
    <title>首页</title>

    <!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/assets/rs-plugin/css/settings.css"
          media="screen"/>

    <!-- StyleSheets -->
    <link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css2/ionicons.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css2/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css2/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css2/main.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css2/style.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css2/icon.css">

    <link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css2/responsive.css">

    <!-- Fonts Online -->
    <link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i"
          rel="stylesheet">

    <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900,100' rel='stylesheet' type='text/css'>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/bootstrap.min2.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/font-awesome.min2.css"/>
    <!-- Custom CSS -->
    <link href="${pageContext.request.contextPath }/assets/css/style3.css" rel="stylesheet">


    <!-- JavaScripts -->
    <script src="${pageContext.request.contextPath }/assets/js/vendors/modernizr.js"></script>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>


    <!--让图片一样大-->
    <style type="text/css">
        .pic {
            position: relative;
            height: 0;
            padding-top: 121.5%;
            overflow: hidden;
        }

        .pic img {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            padding: 2px;
        }
    </style>
</head>

<body>
<!-- Page Wrapper -->
<div id="wrap" class="layout-1">
    <%@include file="header.jsp" %>

    <!-- 广告栏开始 -->
    <div class="slider-container">
        <div class="slider">
            <!-- Slider Image -->
            <div id="mainslider" class="nivoSlider slider-image">
                <img src="assets/img_new/AD1.jpg" alt="main slider" title="#htmlcaption1"/>
                <img src="assets/img_new/AD2.jpg" alt="main slider" title="#htmlcaption2"/>
                <img src="assets/img_new/AD3.jpg" alt="main slider" title="#htmlcaption3"/>
            </div>
            <div id="htmlcaption1" class="nivo-html-caption slider-caption-1">
                <div class="slider-progress"></div>
                <div class="slide1-text slide-1 hidden-xs">
                    <div class="middle-text">
                        <div class="cap-dec wow bounceInLeft" data-wow-duration="0.9s" data-wow-delay="0s">
                            <h1>唐人街探案2</h1>
                        </div>
                        <div class="cap-title wow bounceInRight" data-wow-duration="1.2s" data-wow-delay="0.2s">
                            <h3>大年初一 震撼上映</h3>
                        </div>
                        <div class="cap-readmore wow bounceInUp" data-wow-duration="1.3s" data-wow-delay=".5s">
                            <a href="MovieDetail.html">立即查看</a>
                        </div>
                    </div>
                </div>
            </div>
            <div id="htmlcaption2" class="nivo-html-caption slider-caption-1">
                <div class="slider-progress"></div>
                <div class="slide1-text slide-1 hidden-xs">
                    <div class="middle-text">
                        <div class="cap-dec wow bounceInLeft" data-wow-duration="0.9s" data-wow-delay="0s">
                            <h1>复仇者联盟3</h1>
                        </div>
                        <div class="cap-title wow bounceInRight" data-wow-duration="1.2s" data-wow-delay="0.2s">
                            <h3>无限战争</h3>
                        </div>
                        <div class="cap-readmore wow bounceInUp" data-wow-duration="1.3s" data-wow-delay=".5s">
                            <a href="#">立即查看</a>
                        </div>
                    </div>
                </div>
            </div>
            <div id="htmlcaption3" class="nivo-html-caption slider-caption-1">
                <div class="slider-progress"></div>
                <div class="slide1-text slide-1 hidden-xs">
                    <div class="middle-text">
                        <div class="cap-dec wow bounceInLeft" data-wow-duration="0.9s" data-wow-delay="0s">
                            <h1>头号玩家</h1>
                        </div>
                        <div class="cap-title wow bounceInRight" data-wow-duration="1.2s" data-wow-delay="0.2s">
                            <h3>沉浸其中</h3>
                        </div>
                        <div class="cap-readmore wow bounceInUp" data-wow-duration="1.3s" data-wow-delay=".5s">
                            <a href="#">立即查看</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 广告栏结束 -->

    <!-- Content开始 -->
    <div id="content">
        <!-- Shipping Info 开始 -->
        <section class="shipping-info">
            <div class="container">
                <ul>
                    <!-- Free Shipping -->
                    <li>
                        <div class="media-left"><i class="flaticon-delivery-truck-1"></i></div>
                        <div class="media-body">
                            <h5>海量电影</h5>
                            <span>一个资源庞大的网站</span>
                        </div>
                    </li>
                    <!-- Money Return -->
                    <li>
                        <div class="media-left"><i class="flaticon-arrows"></i></div>
                        <div class="media-body">
                            <h5>实时推荐</h5>
                            <span>一个真正了解您的网站</span>
                        </div>
                    </li>
                    <!-- Support 24/7 -->
                    <li>
                        <div class="media-left"><i class="flaticon-operator"></i></div>
                        <div class="media-body">
                            <h5>技术支持</h5>
                            <span>一个随时能得到服务的网站</span>
                        </div>
                    </li>
                    <!-- Safe Payment -->
                    <li>
                        <div class="media-left"><i class="flaticon-business"></i></div>
                        <div class="media-body">
                            <h5>信息保密</h5>
                            <span>一个账号信息绝对保密的网站</span>
                        </div>
                    </li>
                </ul>
            </div>
        </section>
        <!-- Shipping Info 结束 -->

        <!-- Top Selling Week -->
        <section class=" padding-top-60 padding-bottom-30">
            <div class="container">
                <!-- heading -->
                <div class="heading">
                    <h2>近期热映电影</h2>
                    <hr>
                </div>

                <!-- Items -->
                <div class="item-col-5">
                    <c:forEach var="recentlyReleaseMovie" items="${recentlyReleaseMovieList}">
                        <!-- Product -->
                        <div class="product">
                            <article>
                                <c:choose>
                                    <c:when test="${recentlyReleaseMovie.picture eq null}">
                                        <div class="pic">
                                            <img src="${pageContext.request.contextPath }/assets/img_new/暂无海报.jpg"
                                                 alt="">
                                        </div>
                                    </c:when>
                                    <c:otherwise>
                                        <div class="pic">
                                            <img src="${pageContext.request.contextPath }/upload/${recentlyReleaseMovie.picture}"
                                                 alt="">
                                        </div>
                                    </c:otherwise>
                                </c:choose>
                                <!-- Content -->
                                <span class="tag">${recentlyReleaseMovie.type}</span>
                                <!-- Reviews -->
                                <a href="${pageContext.request.contextPath }/memberMovie?method=index&id=${recentlyReleaseMovie.id}">
                                    <h5>${recentlyReleaseMovie.name}</h5></a>
                                <hr>
                                <div class="price">评分：
                                    <c:choose>
                                        <c:when test="${recentlyReleaseMovie.score eq 0}">
                                            暂无评分
                                        </c:when>
                                        <c:otherwise>
                                            ${recentlyReleaseMovie.score}
                                        </c:otherwise>
                                    </c:choose>
                                </div>
                                <button id="${recentlyReleaseMovie.id}" type="button" class="cart-btn"><i
                                        class="fa fa-heart"></i></button>
                            </article>
                        </div>
                    </c:forEach>
                </div>
            </div>
        </section>

        <!-- Main Tabs Sec -->
        <section class="main-tabs-sec padding-top-60 padding-bottom-0">
            <div class="container">
                <ul class="nav margin-bottom-40" role="tablist">
                    <li role="presentation" class="active"><a href="#tv-au" aria-controls="featur" role="tab"
                                                              data-toggle="tab"> <i class="ico1"></i>动作片</a></li>
                    <li role="presentation"><a href="#smart" aria-controls="special" role="tab" data-toggle="tab"><i
                            class="ico2"></i>喜剧片</a></li>
                    <li role="presentation"><a href="#deks-lap" aria-controls="on-sal" role="tab" data-toggle="tab"><i
                            class="ico3"></i>爱情片</a></li>
                    <li role="presentation"><a href="#game-com" aria-controls="special" role="tab" data-toggle="tab"><i
                            class="ico4"></i>科幻片</a></li>
                    <li role="presentation"><a href="#watches" aria-controls="on-sal" role="tab" data-toggle="tab"><i
                            class="ico5"></i>华语电影</a></li>
                    <li role="presentation"><a href="#access" aria-controls="on-sal" role="tab" data-toggle="tab"><i
                            class="ico6"></i>欧美电影</a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <!-- TV& Home Theater -->

                    <div role="tabpanel" class="tab-pane active fade in" id="tv-au">
                        <!-- Items -->
                        <div class="item-col-5">
                            <c:forEach var="actionMovie" items="${actionMovieList}">
                                <!-- Product -->
                                <div class="product">
                                    <article>
                                        <c:choose>
                                            <c:when test="${actionMovie.picture eq null}">
                                                <div class="pic">
                                                    <img src="${pageContext.request.contextPath }/assets/img_new/暂无海报.jpg"
                                                         alt="">
                                                </div>
                                            </c:when>
                                            <c:otherwise>
                                                <div class="pic">
                                                    <img src="${pageContext.request.contextPath }/upload/${actionMovie.picture}"
                                                         alt="">
                                                </div>
                                            </c:otherwise>
                                        </c:choose>                           <!-- Content -->
                                        <span class="tag">${actionMovie.type}</span>
                                        <!-- Reviews -->
                                        <a href="${pageContext.request.contextPath }/memberMovie?method=index&id=${actionMovie.id}">
                                            <h5>${actionMovie.name}</h5></a>
                                        <hr>
                                        <div class="price">评分：
                                            <c:choose>
                                                <c:when test="${actionMovie.score eq 0}">
                                                    暂无评分
                                                </c:when>
                                                <c:otherwise>
                                                    ${actionMovie.score}
                                                </c:otherwise>
                                            </c:choose>
                                        </div>
                                        <button id="${actionMovie.id}" type="button" class="cart-btn"><i
                                                class="fa fa-heart"></i></button>
                                    </article>
                                </div>
                            </c:forEach>
                        </div>
                    </div>

                    <!-- Computers & Tablets -->
                    <div role="tabpanel" class="tab-pane fade" id="smart">
                        <!-- Items -->
                        <div class="item-col-5">
                            <c:forEach var="comedyMovie" items="${comedyMovieList}">
                                <!-- Product -->
                                <div class="product">
                                    <article>
                                        <c:choose>
                                            <c:when test="${comedyMovie.picture eq null}">
                                                <div class="pic">
                                                    <img src="${pageContext.request.contextPath }/assets/img_new/暂无海报.jpg"
                                                         alt="">
                                                </div>
                                            </c:when>
                                            <c:otherwise>
                                                <div class="pic">
                                                    <img src="${pageContext.request.contextPath }/upload/${comedyMovie.picture}"
                                                         alt="">
                                                </div>
                                            </c:otherwise>
                                        </c:choose>                           <!-- Content -->
                                        <span class="tag">${comedyMovie.type}</span>
                                        <!-- Reviews -->
                                        <a href="${pageContext.request.contextPath }/memberMovie?method=index&id=${comedyMovie.id}">
                                            <h5>${comedyMovie.name}</h5></a>
                                        <hr>
                                        <div class="price">评分：
                                            <c:choose>
                                                <c:when test="${comedyMovie.score eq 0}">
                                                    暂无评分
                                                </c:when>
                                                <c:otherwise>
                                                    ${comedyMovie.score}
                                                </c:otherwise>
                                            </c:choose>
                                        </div>
                                        <button id="${comedyMovie.id}" type="button" class="cart-btn"><i
                                                class="fa fa-heart"></i></button>
                                    </article>
                                </div>
                            </c:forEach>
                        </div>
                    </div>

                    <!-- Cell Phones -->
                    <div role="tabpanel" class="tab-pane fade" id="deks-lap">
                        <!-- Items -->
                        <div class="item-col-5">
                            <c:forEach var="loveMovie" items="${loveMovieList}">
                                <!-- Product -->
                                <div class="product">
                                    <article>
                                        <c:choose>
                                            <c:when test="${loveMovie.picture eq null}">
                                                <div class="pic">
                                                    <img src="${pageContext.request.contextPath }/assets/img_new/暂无海报.jpg"
                                                         alt="">
                                                </div>
                                            </c:when>
                                            <c:otherwise>
                                                <div class="pic">
                                                    <img src="${pageContext.request.contextPath }/upload/${loveMovie.picture}"
                                                         alt="">
                                                </div>
                                            </c:otherwise>
                                        </c:choose>                           <!-- Content -->
                                        <span class="tag">${loveMovie.type}</span>
                                        <!-- Reviews -->
                                        <a href="${pageContext.request.contextPath }/memberMovie?method=index&id=${loveMovie.id}">
                                            <h5>${loveMovie.name}</h5></a>
                                        <hr>
                                        <div class="price">评分：
                                            <c:choose>
                                                <c:when test="${loveMovie.score eq 0}">
                                                    暂无评分
                                                </c:when>
                                                <c:otherwise>
                                                    ${loveMovie.score}
                                                </c:otherwise>
                                            </c:choose>
                                        </div>
                                        <button id="${loveMovie.id}" type="button" class="cart-btn"><i
                                                class="fa fa-heart"></i></button>
                                    </article>
                                </div>
                            </c:forEach>
                        </div>
                    </div>
                    <!-- Cameras & Camcorders -->
                    <div role="tabpanel" class="tab-pane fade" id="game-com">

                        <!-- Items -->
                        <div class="item-col-5">
                            <c:forEach var="scienceFictionMovie" items="${scienceFictionMovieList}">
                                <!-- Product -->
                                <div class="product">
                                    <article>
                                        <c:choose>
                                            <c:when test="${scienceFictionMovie.picture eq null}">
                                                <div class="pic">
                                                    <img src="${pageContext.request.contextPath }/assets/img_new/暂无海报.jpg"
                                                         alt="">
                                                </div>
                                            </c:when>
                                            <c:otherwise>
                                                <div class="pic">
                                                    <img src="${pageContext.request.contextPath }/upload/${scienceFictionMovie.picture}"
                                                         alt="">
                                                </div>
                                            </c:otherwise>
                                        </c:choose>                           <!-- Content -->
                                        <span class="tag">${scienceFictionMovie.type}</span>
                                        <!-- Reviews -->
                                        <a href="${pageContext.request.contextPath }/memberMovie?method=index&id=${scienceFictionMovie.id}">
                                            <h5>${scienceFictionMovie.name}</h5></a>
                                        <hr>
                                        <div class="price">评分：
                                            <c:choose>
                                                <c:when test="${scienceFictionMovie.score eq 0}">
                                                    暂无评分
                                                </c:when>
                                                <c:otherwise>
                                                    ${scienceFictionMovie.score}
                                                </c:otherwise>
                                            </c:choose>
                                        </div>
                                        <button id="${scienceFictionMovie.id}" type="button" class="cart-btn"><i
                                                class="fa fa-heart"></i></button>
                                    </article>
                                </div>
                            </c:forEach>
                        </div>
                    </div>

                    <!-- Audio  -->
                    <div role="tabpanel" class="tab-pane fade" id="watches">
                        <!-- Items -->
                        <div class="item-col-5">
                            <c:forEach var="chineseMovie" items="${chineseMovieList}">
                                <!-- Product -->
                                <div class="product">
                                    <article>
                                        <c:choose>
                                            <c:when test="${chineseMovie.picture eq null}">
                                                <div class="pic">
                                                    <img src="${pageContext.request.contextPath }/assets/img_new/暂无海报.jpg"
                                                         alt="">
                                                </div>
                                            </c:when>
                                            <c:otherwise>
                                                <div class="pic">
                                                    <img src="${pageContext.request.contextPath }/upload/${chineseMovie.picture}"
                                                         alt="">
                                                </div>
                                            </c:otherwise>
                                        </c:choose>                           <!-- Content -->
                                        <span class="tag">${chineseMovie.type}</span>
                                        <!-- Reviews -->
                                        <a href="${pageContext.request.contextPath }/memberMovie?method=index&id=${chineseMovie.id}">
                                            <h5>${chineseMovie.name}</h5></a>
                                        <hr>
                                        <div class="price">评分：
                                            <c:choose>
                                                <c:when test="${chineseMovie.score eq 0}">
                                                    暂无评分
                                                </c:when>
                                                <c:otherwise>
                                                    ${chineseMovie.score}
                                                </c:otherwise>
                                            </c:choose>
                                        </div>
                                        <button id="${chineseMovie.id}" type="button" class="cart-btn"><i
                                                class="fa fa-heart"></i></button>
                                    </article>
                                </div>
                            </c:forEach>
                        </div>
                    </div>

                    <!-- Health, Fitness & Sports  -->
                    <div role="tabpanel" class="tab-pane fade" id="access">
                        <!-- Items -->
                        <div class="item-col-5">
                            <c:forEach var="englishMovie" items="${englishMovieList}">
                                <!-- Product -->
                                <div class="product">
                                    <article>
                                        <c:choose>
                                            <c:when test="${englishMovie.picture eq null}">
                                                <div class="pic">
                                                    <img src="${pageContext.request.contextPath }/assets/img_new/暂无海报.jpg"
                                                         alt="">
                                                </div>
                                            </c:when>
                                            <c:otherwise>
                                                <div class="pic">
                                                    <img src="${pageContext.request.contextPath }/upload/${englishMovie.picture}"
                                                         alt="">
                                                </div>
                                            </c:otherwise>
                                        </c:choose>                           <!-- Content -->
                                        <span class="tag">${englishMovie.type}</span>
                                        <!-- Reviews -->
                                        <a href="${pageContext.request.contextPath }/memberMovie?method=index&id=${englishMovie.id}">
                                            <h5>${englishMovie.name}</h5></a>
                                        <hr>
                                        <div class="price">评分：
                                            <c:choose>
                                                <c:when test="${englishMovie.score eq 0}">
                                                    暂无评分
                                                </c:when>
                                                <c:otherwise>
                                                    ${englishMovie.score}
                                                </c:otherwise>
                                            </c:choose>
                                        </div>
                                        <button id="${englishMovie.id}" type="button" class="cart-btn"><i
                                                class="fa fa-heart"></i></button>
                                    </article>
                                </div>
                            </c:forEach>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- End Content -->

    <!-- Footer -->
    <%@include file="footer.jsp" %>
    <!-- End Footer -->

    <!-- GO TO TOP  -->
    <a href="#" class="cd-top"><i class="fa fa-angle-up"></i></a>
    <!-- GO TO TOP End -->
</div>


<!-- End Page Wrapper -->

<!-- JavaScripts -->
<script src="${pageContext.request.contextPath }/assets/js2/vendors/jquery/jquery.min.js"></script>
<script src="${pageContext.request.contextPath }/assets/js2/vendors/wow.min.js"></script>
<script src="${pageContext.request.contextPath }/assets/js2/vendors/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath }/assets/js2/vendors/own-menu.js"></script>
<script src="${pageContext.request.contextPath }/assets/js2/vendors/jquery.sticky.js"></script>
<script src="${pageContext.request.contextPath }/assets/js2/vendors/owl.carousel.min.js"></script>

<!-- SLIDER REVOLUTION 4.x SCRIPTS  -->
<script type="${pageContext.request.contextPath }/text/javascript"
        src="assets/rs-plugin/js/jquery.tp.t.min.js"></script>
<script type="${pageContext.request.contextPath }/text/javascript" src="assets/rs-plugin/js/jquery.tp.min.js"></script>
<script src="${pageContext.request.contextPath }/assets/js2/main.js"></script>

<script src="${pageContext.request.contextPath }/assets/js/vendors/jquery-1.12.0.min.js"></script>
<!-- bootstrap js -->
<%--<script src="assets/js/bootstrap.min.js"></script>--%>
<!-- owl.carousel js -->
<script src="${pageContext.request.contextPath }/assets/js/owl.carousel.min.js"></script>
<!-- meanmenu js -->
<script src="${pageContext.request.contextPath }/assets/js/jquery.meanmenu.js"></script>
<!-- countdown js -->
<script src="${pageContext.request.contextPath }/assets/js/countdown.js"></script>
<!-- jquery.nivo.slider.pack js -->
<script src="${pageContext.request.contextPath }/assets/js/jquery.nivo.slider.pack.js"></script>
<!-- jquery-ui.min.js -->
<script src="${pageContext.request.contextPath }/assets/js/jquery-ui.min.js"></script>
<!-- wow js -->
<script src="${pageContext.request.contextPath }/assets/js/wow.min.js"></script>
<!-- plugins js -->
<script src="${pageContext.request.contextPath }/assets/js/plugins.js"></script>
<!-- main js -->
<script src="${pageContext.request.contextPath }/assets/js/main2.js"></script>
</body>
</html>